<template>
  <div class="communication">
    <!-- 水平导航栏 -->
    <el-menu mode="horizontal">
      <el-menu-item index="chat-room" @click="activeTab='chat-room'">在线沟通</el-menu-item>
      <el-menu-item index="notice-board" @click="activeTab='notice-board'">公告板</el-menu-item>
    </el-menu>

    <!-- 主内容区 -->
    <div class="main-content">
      <div v-if="activeTab === 'chat-room'" class="centered-chat-container">
        <chat-room />
      </div>
      <notice-board v-if="activeTab === 'notice-board'" />
    </div>
  </div>
</template>

<script>
import ChatRoom from '../components/ChatRoom.vue'; // 导入聊天室组件
import NoticeBoard from '../components/NoticeBoard.vue'; // 导入公告板组件
import { mapState } from "vuex";

export default {
  data() {
    return {
      activeTab: 'notice-board', // 默认选中的选项卡为公告板
    };
  },
  components: {
    ChatRoom,
    NoticeBoard,
  },
};
</script>

<style scoped>
.communication {
  padding: 20px;
}

.main-content {
  margin-top: 20px;

}
.centered-chat-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
